<script setup lang="ts">
import Loading from "../../components/Loading.vue";
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import {EmailControllerService} from "../../../generated";

const loading = ref(true);
const success = ref(false);
const error = ref(false);
const errorMessage = ref("");

let route = useRoute();

const sleep = (ms: number) => {
  return new Promise((resolve) => setTimeout(resolve, ms));
}
onMounted(async () => {
  let token = route.params.token;

  await sleep(2000)

  let res = await EmailControllerService.verifyEmailUsingGet(token as string);
  if (res.code === 0) {
    success.value = true;
    loading.value = false;
  } else {
    error.value = true;
    loading.value = false;
    errorMessage.value = res.message || "验证失败";
  }
})
</script>

<template>
  <div class="confirm-email-container">
    <div v-if="loading" class="loading-container">
      <loading/>
      <p>正在验证邮箱...</p>
    </div>

    <div v-if="success" class="result-container success">
      <i class="success-icon">✓</i>
      <h2>邮箱验证成功</h2>
      <p>您的邮箱已成功验证，现在可以使用所有功能。</p>
    </div>

    <div v-if="error" class="result-container error">
      <i class="error-icon">✗</i>
      <h2>邮箱验证失败</h2>
      <p>{{ errorMessage }}</p>
      <p>请检查您的链接是否正确或尝试重新发送验证邮件。</p>
    </div>
  </div>
</template>

<style scoped>
.confirm-email-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
  padding: 20px;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.result-container {
  text-align: center;
  padding: 30px;
  border-radius: 8px;
  max-width: 500px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.success {
  background-color: #f0fff4;
  border: 1px solid #c6f6d5;
}

.error {
  background-color: #fff5f5;
  border: 1px solid #fed7d7;
}

.success-icon, .error-icon {
  font-size: 48px;
  display: block;
  margin-bottom: 20px;
}

.success-icon {
  color: #38a169;
}

.error-icon {
  color: #e53e3e;
}

h2 {
  margin-bottom: 16px;
}

p {
  margin-bottom: 8px;
}
</style>